<template>
  <div class="statistics">
    <div class="statistics-table">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="changeDate"
      ></el-date-picker>
      <el-select v-model="status" placeholder="请选择" @change="changeStatus">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        placeholder="手机号"
        v-model="mobile"
        clearable
        class="mobile-ipt"
      >
        <template slot="append">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getSendLogs"
          ></el-button>
        </template>
      </el-input>
    </div>

    <el-table
      :data="tableData"
      :header-cell-style="headerCellStyle"
      style="width: 100%;"
    >
      <el-table-column
        prop="send_mobile"
        label="手机号"
        width="200"
      ></el-table-column>
      <el-table-column prop="createtime" label="时间" width="300">
        <template slot-scope="scope">
          {{ scope.row.createtime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column prop="content" label="短信内容"></el-table-column>
      <el-table-column
        prop="status"
        label="发送状态"
        align="center"
        width="300"
      >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == '1'">成功</el-tag>
          <el-tag type="danger" v-else>失败</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { getSendLogs } from "@/api/send-logs";
export default {
  name: "Statistics",
  props: {
    site_key: {
      type: Number,
      default() {
        return null;
      }
    },
    js_ticket: {
      type: String,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      status: "",
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "发送成功"
        },
        {
          value: "-1",
          label: "发送失败"
        }
      ],
      bodyStyle: {
        background: "#fffbf3",
        color: "#efb44a",
        padding: "0 30px",
        fontSize: "14px",
        borderRadius: "4px"
      },
      dateRange: [new Date(), new Date()],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      headerCellStyle: {
        background: "#f7f8fa",
        height: "40px"
      },
      tableData: [],
      mobile: "",
      currentPage: 1,
      pageSize: 10,
      time: [],
      total: 0
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      this.getSendLogs();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.getSendLogs();
    },
    buySign() {
      window.open("https://market.w7.cc/detail?id=2374&type=21", "_blank");
    },
    getSendLogs() {
      let params = {
        js_ticket: this.js_ticket,
        site_key: this.site_key,
        time: this.time,
        status: this.status,
        mobile: this.mobile,
        page_size: this.pageSize,
        page: this.currentPage
      };
      getSendLogs(params).then(res => {
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    changeDate() {
      this.time = [
        this.dateRange
          ? parseInt(new Date(this.dateRange[0]).getTime() / 1000)
          : "",
        this.dateRange
          ? parseInt(new Date(this.dateRange[1]).getTime() / 1000)
          : ""
      ];
      this.getSendLogs();
    },
    changeStatus() {
      this.getSendLogs();
    }
  }
};
</script>

<style lang="scss" scoped>
.statistics {
  .el-card {
    border: 1px solid #fec;
    margin-bottom: 30px;
    color: #efb44a;
    .card-item {
      line-height: 32px;
    }
  }
}

.el-select {
  margin-left: 30px;
}

.statistics-table {
  margin-bottom: 30px;
}

.mobile-ipt {
  width: 300px;
  margin-left: 30px;
}
</style>
